<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="会员卡包名">
        <el-input v-model="formInline.searchKey" placeholder="请输入会员卡包名" @input="input" @change="onSearch" />
      </el-form-item>
      <!-- <el-form-item label="会员卡类型">
        <el-select v-model="formInline.selectValue" @change="onSelect">
          <el-option label="全部" value="-1" />
          <el-option label="充值卡" value="4" />
          <el-option label="月卡" value="1" />
          <el-option label="次卡" value="2" />
          <el-option label="计时" value="3" />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button size="mini" @click="addCar">添加套餐卡</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="carList"
      :cell-style="{textAlign:'center'}"
      :header-cell-style="{textAlign:'center'}"
      style="width: 100%"
      border
      stripe
    >
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="会员卡包名" prop="package_Name" />
      <el-table-column label="适用洗车站" prop="card_Type">
        <template>
          <div style="color: #B4BCCC">—</div>
        </template>
      </el-table-column>
      <el-table-column label="配置时间" prop="set_Time" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除吗？" @onConfirm="deleteCard(scope.$index, scope.row)">
            <el-button slot="reference" size="mini" type="danger">删除</el-button>
          </el-popconfirm>

          <div style="margin-left: 20px;display: inline-block;">
            <span style="margin-right: 10px;">{{
              scope.row.status === 1 ? "上架" : "下架"
            }}</span>
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="rgb(196,196,196)"
              :active-value="1"
              :inactive-value="2"
              @change="newUpDataStatus(scope.row)"
            />
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column type="selection" width="55" /> -->
    </el-table>

    <!-- 添加模态框(一级) -->
    <form-model
      :id="id"
      v-model="dialogFormVisible"
      :tag="tag"
      :card-list-edit="cardListEdit"
      :form-label-width="formLabelWidth"
      :arr="arr"
      :rules="rulesName"
      :form="form"
      @del="del"
      @edit="edit"
      @add="add"
      @determine="determine"
      @cancal="cancal"
      @changeTag="changeTag"
    >
      <template slot="add">
        <edit-or-add
          v-model="isAddModel"
          :title="title"
          :rules="rules"
          :form="form"
          :form-label-width="formLabelWidth"
          :add-or-edit="addOrEdit"
          :selling-title="sellingTitle"
          :validity="validity"
          @bodyClose="bodyClose"
          @save="save"
          @upload="success"
          @onDate="onDate"
          @changeName="changeName"
          @changeContain="changeContain"
        />
      </template>
    </form-model>
    <!-- 二级 -->

    <div class="block">
      <!-- <el-pagination
        :current-page="pageIndex"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /> -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageIndex"
        :limit.sync="pageSize"
        @pagination="getCardList"
      />
    </div>
  </div>
</template>

<script src="./membershipCard.js"></script>
<style scoped="scoped">
  .block {
    text-align: center;
    margin-top: 100px;
  }
</style>
